<template>
    <div class="editType" ref="addExTy" >
        <el-dialog width="60%" @close="dialogClose" :visible="addExTy" title="添加扩展属性">
            <el-form
                ref="form" 
                :model="editForm" 
                label-width="120px"
                :rules="rules"
            >
                <el-form-item label="扩展属性名称:" prop="name">
                    <el-input v-model="editForm.name" style="width: 200px;"></el-input>
                    <p class="info">扩展属性的名称，最多15个字符，不允许包含脚本标签和\(反斜杠)。</p>
                </el-form-item>

                <el-form-item label="是否支持多选">
                    <el-checkbox v-model="editForm.displaySeq">支持多选</el-checkbox>
                </el-form-item>

                <el-form-item label="属性值:">
                    <el-input v-model="editForm.value" style="width: 400px;"></el-input>
                    <p class="info">扩展属性的值，多个属性值可用“,”号隔开，每个值的字符数最多15个字符，不允许包含脚本标签和\(反斜杠)，系统会自动过滤</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onSubmit">确认</el-button>
                <el-button type="primary" @click="dialogClose">取消</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>

<script>
import {
    addExpandAttr
} from "@/api/agri-product/goodsType"

export default {
    name: 'productTypeEditDL',
    data () {
        return {
            editForm: {
                name: '',
                displaySeq: true
            },
            activeName: 'first', //当前选择
            DialogVisible: true,
            rules: {
                name :[{required: true, message: '请输入扩展属性名称', trigger: 'blur'}]
            },
            expandData: []
        }
    },
    props: ['addExTy', 'id'],
    created () {
        console.log(this.editForm, this.visible, '11111')
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        //关闭弹窗
        dialogClose (status) {
            this.$emit("cancel", status);
        },
        onSubmit () {
            this.$refs['form'].validate((valid) => {
                console.log(valid, '11111')
                if (!valid) return false;
                this.editForm.value = this.editForm.value.replace(/，/g, ',').replace(/\s+/g, '');
                this.editForm.typeId = this.id;
                this.editForm.displaySeq = this.editForm.displaySeq ? 1 : 0;
                addExpandAttr(this.editForm).then(res => {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.dialogClose(true)
                    this.editForm = {
                        displaySeq: true
                    }
                }).catch(err => {
                    this.$message({
                        type: 'info',
                        message: '添加失败'
                    });
                })
            });
            
        },
        addType () {
            
        }
    },
    watch: {
        activeName (cur) {
            cur === 'second' && this.productAttr();
            cur === 'third' && this.skuItem();
        }
    }
}
</script>

<style scoped>
.info {
    height: 16px;
    line-height: 16px;
    margin: 0;
}
</style>